<template>
  <div>
    <van-sticky>
      <!-- 顶部导航 -->
      <van-nav-bar left-arrow @click-left="onClickLeft" fixed placeholder/>
    </van-sticky>
    <!-- 左侧导航 -->
    <van-tree-select
      :items="leftNav_brList"
      :main-active-index.sync="active"
      @click-nav="getAlllClassfication"
      height="755px"
      class="deep"
    >
      <!-- 右侧模块 -->
      <template #content>
        <!-- <div v-if="active==0?'true':'true'"> -->
        <van-row type="flex" justify="center">
          <van-col span="24" class="deep">
            <van-grid :border="false" :column-num="3"  >
              <van-grid-item v-for="item in classficationList" :key="item.id">
                <van-image :src="item.imgUrl"/>
                {{item.name}}
              </van-grid-item>
            </van-grid>
          </van-col>
        </van-row>
        <!-- </div> -->
      </template>
    </van-tree-select>
    <!-- 底部导航 -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
export default {
  name: "Cliassfication",
  components: {
    Tabbar,
  },
  data() {
    return {
      index: 0,
      active: 0,
      leftNav_brList: [], //左侧导航栏数组
      classficationList: [], //右侧分类数组
    };
  },

  mounted() {
    this.getAllleftNav_bar();
    this.getAlllClassfication(this.index);
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    getAllleftNav_bar() {
      this.$axios
        .get("/left_navBar")
        .then((res) => {
          if (res.statusText == "OK") {
            this.leftNav_brList = res.data;
          } else {
            console.log("出错了");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAlllClassfication(index) {
      // console.log(index)
      this.$axios
        .get("/classfication?index=" + index)
        .then((res) => {
          if (res.statusText == "OK") {
            this.classficationList = res.data;
          } else {
            console.log("出错了");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
a.van-sidebar-item.van-sidebar-item--select.van-tree-select__nav-item {
  color: red;
}
a.van-sidebar-item.van-sidebar-item--select.van-tree-select__nav-item::before {
  background-color: white;
}
.deep /deep/ .van-sidebar-item__text {
  margin-left: 25px;
}
.deep /deep/ .van-image{
  height: 70px;
  width: 70px;
  margin-top: 15px;
}
</style>